<template>
	<!-- 加量包 -->
	<!-- @ -->
	<view class="box" touchmove.stop.prevent="() => {}">
		<view class="backage">
			<view class="my-head" id="myHead">
				<view class="head" :style="{'top':statusBarH}">
					<u-icon name="arrow-left" color="#ffffff" @click="fnReturn"></u-icon>
					<view class="jialiangbao" @click="clickRight">我的加量包</view>
				</view>
			</view>
			<view class="content">
				<scroll-view scroll-y :style="{'height':windowHeight-headH-footerH - statusBarH- safeAreaInsets +'px'}">
					<view class="titlebox">
						<view class="title">{{detailsObj.Title}}</view>
						<view class="text">{{detailsObj.Description}}</view>
					</view>
					<view class="jianli">
						<view class="left-box">
							<view>今日可用</view>
							<text class="text1">{{detailsObj.Quantity}}</text>
							<text class="text2">{{detailsObj.Unit}}</text>
						</view>
						<view class="right-box" @click="RefreshResume">立即刷新</view>
					</view>
					<view class="xuanzequanyi">
						<view class="xztitle">选择{{detailsObj.Title}}加量包
							<view class="zhiding" v-if="detailsObj.Title=='简历置顶'"><text>置顶1次时长为60分钟</text></view>
						</view>

						<view class="xztext">{{detailsObj.Introduction}}</view>

						<view class="danxuan">
							<view class="danxuanbox" v-for="(item,index) in detailsObj.planServicePackages" :key="index"
								@click="clickJia(item,index)" :class="{'danxuanbox1':activation==index}">
								<view class="box1">
									<text class="jici">{{item.Value}}</text>
									<text class="jicitext">{{item.Unit}}</text>
								</view>
								<view class="box2">{{item.Price}}元</view>
								<view class="imagebox">
									<view class="yuan">
										<u-icon name="checkbox-mark" color="#ffffff" size="20"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
			<view class="footer" id="myFooter">
				<view class="btn" @click="goPay">立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: null, //
				statusBarH: '', //状态栏高度
				windowHeight: '', //屏幕高度
				activation: 0,
				UserResumeInfo: {},
				UserInfo: {},
				headH: '', //导航栏高度
				footerH: '', //底部tabbar高度
				safeAreaInsets: '', //苹果手机最底部高度
				detailsObj: {},
				payId: null, //选择购买的项
			}
		},
		onLoad(option) {
			this.type = Number(option.type)

		},
		onShow() {
			this.ResumeDedetails()

		},
		created() {
			const app = getApp()
			this.statusBarH = app.globalData.statusBarH //状态栏高度
			this.windowHeight = app.globalData.phoneInformation.windowHeight //屏幕高度
			this.safeAreaInsets = app.globalData.phoneInformation.safeAreaInsets.bottom
			this.UserResumeInfo = app.globalData.userResume
			this.UserInfo = app.globalData.user

			this.$nextTick(() => {
				uni.createSelectorQuery().in(this).select('#myHead').boundingClientRect(data => {
					this.headH = data.height
				}).exec();
				uni.createSelectorQuery().in(this).select('#myFooter').boundingClientRect(data => {
					this.footerH = data.height
				}).exec();
			})

		},
		methods: {
			ResumeDedetails() {
				const app = getApp();
				const userRole = app.globalData.userRole == 0 ? 2 : 1;
				this.$http.huirc.servitemsPackage({
					Type: userRole,
					FeatureType: this.type
				}).then(res => {
					console.log(res);
					if (res.Success) {
						this.detailsObj = res.Result
						this.detailsObj.planServicePackages = this.detailsObj.planServicePackages.map(item => {
							return {
								...item,
								OrderType: 2
							}
						})
					}
				})
			},
			clickJia(item, index) {
				console.log(item);
				this.activation = index
				this.payId = item
			},
			// 刷新简历
			RefreshResume() {
				let obj = {}
				if (this.type == 22001) {
					obj = {
						resumeId: this.UserResumeInfo.Id,
						searchType: 8,
						userId: this.UserInfo.UserId,
					}
				} else if (this.type == 22002) {
					obj = {
						resumeId: this.UserResumeInfo.Id,
						searchType: 9,
						userId: this.UserInfo.UserId,
					}
				}
				this.$http.huirc
					.actionsRefreshTime(obj)
					.then((res) => {
						if (res.Success) {

							this.$util.currentUser().then((res) => {
								this.UserResumeInfo = uni.getStorageSync("homelist").UserResumeInfo;
							});
						}
					}).then(res => {
						this.ResumeDedetails()
					})
			},
			// 置顶简历
			topResume() {
				this.$http.huirc
					.actionsRefreshTime({
						resumeId: this.UserResumeInfo.Id,
						searchType: 9,
						userId: this.UserId,
					})
					.then((res) => {
						if (res.Success) {
							this.$util.currentUser().then((res) => {
								this.UserResumeInfo =
									uni.getStorageSync("homelist").UserResumeInfo;
							});
						}
					}).then(res => {
						this.ResumeDedetails()
					})
			},
			// 点击返回
			fnReturn() {
				uni.navigateBack()
			},
			// 点击我的加量包
			clickRight() {
				uni.navigateTo({
					url: "/pages/views/packageB/type-jobhunting/DosingPackage/dosingRecord"
				})
			},
			// 立即支付
			goPay() {
				if (this.payId == null) {
					this.payId = this.detailsObj.planServicePackages[0]
				}
				console.log(this.payId);
				uni.navigateTo({
					url: "/pages/views/packageB/Publicdocuments/index?tcid=" + JSON.stringify(this.payId)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.box {
		background-image: url("/static/image/dosing/shuaxinjianli.png");
		background-repeat: no-repeat;
		background-size: cover;
		height: 100vh;
	}


	.my-head {
		padding-top: var(--status-bar-height);
		position: relative;

		// padding-bottom: 25rpx;
		.head {
			display: flex;
			padding: 0rpx 0 0rpx 30rpx;
			justify-content: space-between;
			align-items: center;
			// position: fixed;
			right: 0;
			// top: 36rpx;
			left: 0;
			z-index: 999;
			background-color: #0a1a5b;

			.jialiangbao {
				background: #F35370;
				border-radius: 32rpx 0rpx 0rpx 32rpx;
				opacity: 1;
				padding: 12rpx 27rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}

	.content {
		padding: 30rpx 30rpx 0;
		// margin-top:100rpx;
		box-sizing: border-box;

		.titlebox {
			padding: 0rpx 10rpx;

			.title {
				font-size: 48rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.text {
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.jianli {
			margin-top: 23rpx;
			// background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			opacity: 1;
			padding: 23rpx 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-image: url("/static/image/dosing/mohubeijing.png");
			background-repeat: no-repeat;
			background-size: cover;

			.left-box {
				padding: 10rpx 0;

				view {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.5);
				}

				.text1 {
					font-size: 64rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.text2 {
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

			}

			.right-box {
				background: linear-gradient(270deg, #3476FE 0%, #3476FE 100%);
				border-radius: 45rpx;
				opacity: 1;
				padding: 15rpx 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.xuanzequanyi {
			margin: 40rpx 0 0;
			padding: 30rpx 28rpx 2rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			opacity: 1;

			.xztitle {
				font-size: 32rpx;
				font-weight: 700;
				color: #000000;
				padding-bottom: 10rpx;
				display: flex;

				.zhiding {
					background: rgba(243, 83, 112, 0.17);
					border-radius: 6rpx;
					// opacity: 0.17;
					padding: 2rpx 10rpx;
					margin-left: 20rpx;


					font-size: 24rpx;
					font-weight: 400;
					color: #F35370;
					display: flex;
					justify-content: center;
					align-items: center;



				}
			}

			.xztext {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.6);
			}

			.danxuan {
				margin-top: 30rpx;


				.danxuanbox {
					background: #EAF1FF;
					border-radius: 20rpx;
					opacity: 1;
					border: 4rpx solid rgba(211, 211, 211, 0.31);
					padding: 29rpx 50rpx;
					margin-bottom: 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: baseline;

					.box1 {
						min-width: 35%;

						.jici {
							font-size: 64rpx;
							font-weight: 400;
							color: #060637;
						}

						.jicitext {
							font-size: 24rpx;
							font-weight: 400;
							color: #060637;
						}
					}

					.imagebox {

						.yuan {
							width: 44rpx;
							height: 44rpx;
							background: #FFFFFF;
							opacity: 1;
							border: 2rpx solid #949494;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}

				.danxuanbox1 {
					background: #EAF1FF;
					border-radius: 20rpx;
					opacity: 1;
					border: 4rpx solid #3476FE;
					padding: 29rpx 50rpx;
					margin-bottom: 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: baseline;

					.box1 {
						.jici {
							font-size: 64rpx;
							font-weight: 400;
							color: #060637;
						}

						.jicitext {
							font-size: 24rpx;
							font-weight: 400;
							color: #060637;
						}
					}

					.imagebox {

						.yuan {
							width: 44rpx;
							height: 44rpx;
							background: #3476fe;
							opacity: 1;
							border: 2rpx solid #3476fe;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
						}

					}
				}

			}
		}

	}

	.footer {
		background: #000000;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		border: 1rpx solid rgba(0, 0, 0, 0);

		position: fixed;
		bottom: 0;
		// width: 100vh;
		// height: 177rpx;
		padding: 25rpx 60rpx 71rpx;

		.btn {
			background: #3476FE;
			border-radius: 10rpx;
			opacity: 1;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
			padding: 24rpx 255rpx;
		}
	}
</style>